<div
	x-data="{darkMode: localStorage.getItem('darkMode') || localStorage.setItem('darkMode', 'system')}"
	x-init="$watch('darkMode', val => localStorage.setItem('darkMode', val))"
	:class="{'dark': darkMode === 'dark' || (darkMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)}"
></div>
<div x-data="{ count: 0 }">
	<button x-on:click="count++">Increment</button> <span x-text="count"></span>
</div>
<div x-data="{ count: 0 }">
	<button @click="count++">Increment</button> <span x-text="count"></span>
</div>
